<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <div>
        <Modal v-model='modal' :title="edit?'修改专题配置':'添加专题配置'" :mask-closable='false' @on-cancel='canceledit(modalname)'>
            <Form ref='modalname' :model='modalparams' :rules='createRules'>
                <FormItem v-if="edit" label='当前专题: ' requried :label-width='90'>
                    <div>{{modalparams.zt_name}}</div>
                </FormItem>
                <FormItem v-else label='当前专题: ' prop='zt_name' :label-width='90'>
                    <Input v-model="modalparams.zt_name" placeholder="请填写专题名称"/>
                </FormItem>
                <template v-for="(item, index) in modalparams.list">
                    <Row :key="index" :gutter="16">
                        <Col span="9">
                            <FormItem  :prop="'list.' + index + '.swt_id'" :rules="{required: true, message: '请选择配置', trigger: 'change'}">
                                <Select :disabled="item.bool" v-model="item.swt_id" placeholder="请选择配置">
                                    <template v-for="item in selectdata">
                                        <Option :value="item.id" :key="item.id">{{ item.name }}</Option>
                                    </template>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="9">
                            <FormItem :prop="'list.' + index + '.value'" :rules="{required: true, message: '请填写配置的值', trigger: 'blur'}">
                                <Input v-model="item.value" placeholder="请填写配置的值"/>
                            </FormItem>
                        </Col>
                        <Col>
                            <Button type="error" icon="md-remove" @click="removeset(index)"></Button>
                            <Button v-if="index === modalparams.list.length-1" type="success" icon="md-add" class="ivu-ml-8" @click="addset"></Button>
                        </Col>
                    </Row>
                </template>
            </Form>
            <div slot='footer'>
                <Button @click='canceledit(modalname)'>取消</Button>
                <Button @click='submitedit(modalname)' type='primary' :loading="modal_loading">保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { swtswtgetswt, swtztupdateztconfig, swtztgetztconfigdetail } from '@api/business'
    export default {
        name: '',
        components: {},

        data () {
            return {
                selectdata: [],
                modalname: 'modalname',
                modal: false,
                edit: false,
                modalparams: { zt_id: '', zt_name: '', list: [{ swt_id: '', value: '' }] },
                createRules: {
                    zt_name: [{
                        required: true,
                        message: '请填写当前专题',
                        trigger: 'blur'
                    }]
                },
                modal_loading: false
            };
        },
        mounted () {
        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            async initial (row) {
                await swtswtgetswt().then(res => {
                    this.selectdata = res
                })
                if (row) {
                    this.modalparams = { zt_id: row.id, zt_name: row.name, list: [{ swt_id: '', value: '' }] }
                    this.edit = true
                } else {
                    this.modalparams = { zt_id: '', zt_name: '', list: [{ swt_id: '', value: '' }] }
                    this.edit = false
                }
                await this.askData()
            },
            askData () {
                swtztgetztconfigdetail({ id: this.modalparams.zt_id }).then(res => {
                    let list = []
                    for (let item of res) {
                        list.push({ swt_id: item.swt_id, value: item.value, bool: true })
                    }
                    if (list.length > 0) this.modalparams.list = list
                    else this.modalparams.list = [{ swt_id: '', value: '' }]
                    this.modal = true
                })
            },
            addset () {
                this.modalparams.list.push({ swt_id: '', value: '' })
            },
            removeset (index) {
                this.modalparams.list.splice(index, 1)
            },
            canceledit (name) {
                this.modal = false
                this.$refs[name].resetFields();
            },
            submitedit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.modal_loading = true
                        let list = this.modalparams.list.map(res => {
                            return { swt_id: res.swt_id, value: res.value }
                        })
                        let params = {
                            zt_id: this.modalparams.zt_id,
                            zt_name: this.modalparams.zt_name,
                            list
                        }
                        swtztupdateztconfig(params).then(res => {
                            if (this.edit) this.$Message.success('编辑成功')
                            else this.$Message.success('新增成功')
                            this.modal = false
                            this.modal_loading = false
                            this.$emit('askData')
                        })
                    }
                })
            }
        }
    }
</script>
